<template>
    <!-- 导航栏 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="back" />

    <!-- 购物车列表 -->
    <div class="list">
        <!-- 复选框组 -->
        <van-checkbox-group v-model="checked">
            <div class="product" v-for="(item, index) in cartlist">
         
                <!-- 购物车商品 滑动单元格 -->
                <van-swipe-cell>

                    <!-- 复选框 -->
                    <van-checkbox :name="item.id" class="item"></van-checkbox>

                    <van-card :price="item.total" :desc="'单价：￥'+item.price" :title="item.product.name"
                        :thumb="item.product.cover_cdn">
                        <!-- 利用插槽，重新部分结构 -->
                        <!-- 库存 -->
                        <template #tags>
                            <p>库存：{{item.product.stock}}</p>
                        </template>

                        <!-- 右下角 -->
                        <template #footer>
                            <van-stepper v-model="item.nums" :name="item.id" disable-input @change="CartStep" />
                        </template>
                    </van-card>

                    <!-- 右侧滑动区域的内容 -->
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="CartDel(item.id)" />
                    </template>
                </van-swipe-cell>
            </div>
        </van-checkbox-group>
    </div>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="total" button-text="提交订单" @click="SubmitOrder">
        <van-checkbox v-model="all" @click="Switch">全选</van-checkbox>
    </van-submit-bar>
</template>

<script>
    export default {
        name: "CartIndex",
        created() {
            this.CartData()
        },

        data() {
            return {
                LoginUser: this.$cookies.get('LoginUser'),
                all: false,
                checked: [],
                cartlist: [],
            }
        },

        methods: {
            back() {
                this.$router.go(-1)
            },

            // 全选功能
            Switch() {
                if (this.all) {
                    var ids = [];
                    this.cartlist.map((value) => {
                        ids.push(value.id);
                    })

                    this.checked = ids
                } else {
                    this.checked = []
                }
            },

            // 更新购物车数量
            async CartStep(value, detail) {
               
                // 组装数据
                var data = {
                    cartid: detail.name,
                    nums: value,
                    userid: this.LoginUser.id
                }

                var result = await this.$api.CartEdit(data)

                if (result.code == 0) {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                    return false
                }

                this.CartData()

                return false;
            },

            // 获取购物车数据
            async CartData() {
                var result = await this.$api.CartIndex({ userid: this.LoginUser.id })

                this.cartlist = result.data

                return false;
            },

            // 删除购物车数据
            async CartDel(cartid) {
                //弹出确认对话框
                this.$dialog.confirm({
                    'title': '删除购物车',
                    'message': '是否确认删除商品'
                }).then(async () => {
                    //组装数据
                    var data = {
                        userid: this.LoginUser.id,
                        cartid
                    }

                    var result = await this.$api.CartDel(data)

                    if (result.code == 0) {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })

                        return false
                    }

                     this.cartlist = [];

                    //重新更新一下购物车的记录
                    this.CartData()

                    return false;

                }).catch(() => { })
            },

            // 提交订单
            SubmitOrder(){
                if(this.checked.length>0){
                    this.$router.push({
                        path:'/product/cart/confirm',
                        query:{
                            cartids:this.checked.join(',')
                        }
                    })
                }else{
                    this.$notify({
                        message: '请选择下单商品',
                        duration: 1000,
                    })
                }
            },


        }
    }
</script>

<style>
    .list {
        height: 84.5vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .product {
        position: relative;

    }

    .product .van-card {
        padding-left: 3em;
    }

    .product .van-card__footer {
        position: absolute;
        right: 1em;
        bottom: 1em;
    }


    .item {
        position: absolute;
        z-index: 1;
        top: 42%;
        left: 1%;
    }

    .delete-button {
        height: 100% !important;
    }
</style>